function Page(classname, options = {}) {
    this.options = options
    this.list = null
    this.currentPage = 1
    this.container = document.querySelector('.'+classname);
    this.box = document.createElement('div')
    this.setStyle(this.box, {
        display: 'flex',
        'justify-content': 'center',
        'align-items': 'center',
        height: '30px',
        margin: '5px 0'
    })
    this.container.appendChild(this.box)
    this.box.onmouseover = () => this.box.style.cursor = 'pointer'
    this.box.onselectstart = () => false
    this.defaultParams = {
        language: {
            first: '首页',
            prev: '上一页',
            list: '',
            next: '下一页',
            last: '尾页'
        },
        pageData: {
            total: 300,
            pageSize: 12
        }
    }
    this.setDefault()
    this.fn = options.fn || function(){}
    this.totalPage = Math.ceil(this.defaultParams.pageData.total / this.defaultParams.pageData.pageSize)
    this.createDiv()
    this.pageTab()
    this.addGO()
    this.init()
}
Page.prototype.init = function() {
    this.createPage()
    this.setDisabled()
    this.fn(this.currentPage)
}
Page.prototype.addGO = function() {
    var input = document.createElement('input')
    input.type = 'number'
    this.setStyle(input, {
        'padding-left': '6px',
        width: '50px',
        height: '28px',
        border: '1px solid #ccc',
        outline: 'none',
        margin: '5px'
    })
    this.box.appendChild(input)
    input.onblur = () => {
        if(+input.value < 1) {
            input.value = 1
        } 
        if(+input.value > this.totalPage) {
            input.value = this.totalPage
        }
    }
    var btn = document.createElement('button')
    btn.innerText = 'GO'
    this.box.appendChild(btn)
    this.setStyle(btn, {
        border: '1px solid #ccc',
        outline: 'none',
        height: '32px',
        'background-color': '#0ff',
        margin: '5px'
    })
}
Page.prototype.setDisabled = function() {
    if(this.currentPage === 1) {
        this.box.children[0].style.backgroundColor = '#eee'
        this.box.children[0].disabled = true
        this.box.children[1].style.backgroundColor = '#eee'
        this.box.children[1].disabled = true
    } else {
        this.box.children[0].style.backgroundColor = 'transparent'
        this.box.children[0].disabled = false
        this.box.children[1].style.backgroundColor = 'transparent'
        this.box.children[1].disabled = false
    }
    if(this.currentPage === this.totalPage) {
        this.box.children[3].style.backgroundColor = '#eee'
        this.box.children[3].disabled = true
        this.box.children[4].style.backgroundColor = '#eee'
        this.box.children[4].disabled = true
    } else {
        this.box.children[3].style.backgroundColor = 'transparent'
        this.box.children[3].disabled = false
        this.box.children[4].style.backgroundColor = 'transparent'
        this.box.children[4].disabled = false
    }
}
Page.prototype.pageTab = function() {
    this.box.onclick = () => {
        var target = window.event.target;
        if(target.haha === 'first' && !target.disabled) {
            this.currentPage = 1
            this.init()
        } else if(target.haha === 'prev' && !target.disabled) {
            this.currentPage--
            if(this.currentPage < 1) this.currentPage = 1 
            this.init()
        } else if(target.haha === 'next' && !target.disabled) {
            this.currentPage++
            if(this.currentPage > this.totalPage) this.currentPage = this.totalPage 
            this.init()
        } else if(target.haha === 'last' && !target.disabled) {
            this.currentPage = this.totalPage
            this.init()
        } else if(target.tagName === 'P' && +target.innerText != this.currentPage) {
            this.currentPage = +target.innerText
            this.init()
        } else if(target.tagName === 'BUTTON' && +target.previousElementSibling.value != this.currentPage) {
            if(+target.previousElementSibling.value < 1) target.previousElementSibling.value = 1
            if(+target.previousElementSibling.value > this.totalPage) target.previousElementSibling.value = this.totalPage
            this.currentPage = +target.previousElementSibling.value
            this.init()
        }
    }
}
Page.prototype.createPage = function() {
    this.list.innerHTML = ''
    if(this.totalPage > 5) {
        if(this.currentPage <= 3) {
            this.createP(1, 5)
        }
        else if(this.currentPage >= this.totalPage - 2) {
            this.createP(this.totalPage-4, this.totalPage)
        }
        else {
            this.createP(this.currentPage-2, this.currentPage+2)
        }
    }
    else {
        this.createP(1, this.totalPage)
    }
}
Page.prototype.createP = function(start, end) {
    for(var i=start; i<=end; i++) {
        var p = document.createElement('p')
        p.innerText = i
        this.list.appendChild(p)
        this.setStyle(p, {
            border: '1px solid #ccc',
            padding: '5px',
            margin: '5px'
        })
        if(this.currentPage === i) {
            p.style.backgroundColor = 'hotpink'
        }
    }
}
Page.prototype.createDiv = function() {
    for(var key in this.defaultParams.language) {
        var div = document.createElement('div')
        div.innerText = this.defaultParams.language[key]
        if(key != 'list') {
            this.setStyle(div, {
                border: '1px solid #ccc',
                padding: '5px',
                margin: '5px'
            })
        } else {
            this.list = div
            this.setStyle(this.list, {
                display: 'flex',
                'justify-content': 'space-evenly',
                'align-items': 'center'
            })
        }
        div.haha = key
        this.box.appendChild(div)
    }
}
Page.prototype.setDefault = function() {
    for(var key in this.options.language) {
        this.defaultParams.language[key] = this.options.language[key]
    }
    for(var key in this.options.pageData) {
        this.defaultParams.pageData[key] = this.options.pageData[key]
    }
}
Page.prototype.setStyle = function(ele, obj) {
    var str = ''
    for(var key in obj) {
        str += key + ':' + obj[key] + ';'
    }
    ele.style.cssText = str
}